<template>
  <div v-if="config.isOpen">
    <!-- @cancel="" -->
    <a-modal :title="title" v-model="config.isOpen" @ok="handleOk" width="70%" :footer="null">
      <!-- <div style="margin: 0 auto;width: auto;height: auto" v-if="is" v-html="myHtml"></div>-->
      <iframe frameborder="0" style="width: 100%;height: 65vh" :srcdoc="myHtml"></iframe>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "LookHtml",
  data() {
    return { is: false, myHtml: "" };
  },
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          isOpen: false,
          htmlCode: ""
        };
      }
    },
    title: {
      type: String,
      default: "查看一下"
    }
  },
  methods: {
    handleOk() {
      this.config.isOpen = false;
    }
  },
  watch: {
    "config.htmlCode": function(htmlText) {
      this.is = !!htmlText;
      this.myHtml = htmlText;
    }
  }
};
</script>

<style>
.invoice-box {
  max-width: 800px;
  margin: auto;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  font-size: 16px;
  line-height: 24px;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  color: #555;
}

.invoice-box table {
  width: 100%;
  line-height: inherit;
  text-align: left;
}

.invoice-box table td {
  padding: 5px;
  vertical-align: top;
}

.invoice-box table tr td:nth-child(n + 2) {
  text-align: right;
}

.invoice-box table tr.top table td {
  padding-bottom: 20px;
}

.invoice-box table tr.top table td.title {
  font-size: 45px;
  line-height: 45px;
  color: #333;
}

.invoice-box table tr.information table td {
  padding-bottom: 40px;
}

.invoice-box table tr.heading td {
  background: #eee;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.invoice-box table tr.details td {
  padding-bottom: 20px;
}

.invoice-box table tr.item td {
  border-bottom: 1px solid #eee;
}

.invoice-box table tr.item.last td {
  border-bottom: none;
}

.invoice-box table tr.item input {
  padding-left: 5px;
}

.invoice-box table tr.item td:first-child input {
  margin-left: -5px;
  width: 100%;
}

.invoice-box table tr.total td:nth-child(2) {
  border-top: 2px solid #eee;
  font-weight: bold;
}

.invoice-box input[type="number"] {
  width: 60px;
}

@media only screen and (max-width: 600px) {
  .invoice-box table tr.top table td {
    width: 100%;
    display: block;
    text-align: center;
  }

  .invoice-box table tr.information table td {
    width: 100%;
    display: block;
    text-align: center;
  }
}

/** RTL **/
.rtl {
  direction: rtl;
  font-family: Tahoma, "Helvetica Neue", "Helvetica", Helvetica, Arial,
    sans-serif;
}

.rtl table {
  text-align: right;
}

.rtl table tr td:nth-child(2) {
  text-align: left;
}
</style>

<style>
a {
  text-decoration: none;
  color: #1da57a;
}

.title {
  font-size: 20px;
  line-height: 35px;
  color: rgba(0, 0, 0, 0.65);
}
.inline-block {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}
.anv-context {
  width: 500px;
  height: 200px;
  margin: 0 auto;
  display: none;
  overflow: hidden;
}
.ask {
  margin-top: 10px;
}
.ant-input-number-div {
  width: 200px;
  height: auto;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
  line-height: 1.5;
  display: inline-block;
  margin-right: -88px;
}
.ant-input-number-div .ant-input-number-input {
  width: 100%;
  text-align: left;
  outline: 0;
  border: 0;
  border-radius: 4px;
  height: 30px;
  padding: 0 11px;
}

.dsp-button {
  color: #fff;
  background-color: #1da57a;
  border-color: #1da57a;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  height: 35px;
  padding: 0 15px;
  line-height: 1px;
}

.dsp-active {
  border-bottom: 2px solid #1da57a;
}
</style>
